import FieldConfig from "../typing/field-config";
import DyForm from "../../DyForm";
import BaseFormElement from "../typing/base-form-element";

export default class SelectFormElement extends BaseFormElement<string>{


    // 显示错误信息的
    protected readonly _message: HTMLDivElement
    protected readonly _el: HTMLSelectElement
    protected readonly _label: HTMLLabelElement
    constructor(protected config: FieldConfig, height: number, protected form: DyForm) {
        super(config, height, form)
        this._label = this.genLabel()
        this._elContainer.appendChild(this._label);
        const container = this.genFormEl();
        this._el = container.querySelector('select')
        this._elContainer.appendChild(container)
    }
    getValue(): string {
        return this._el.value;
    }

    getName(): string {
        return this.config.name
    }

    protected genLabel() {
        const label = document.createElement('label')
        label.classList.add("block", "text-sm", "font-medium", "leading-6", "text-gray-900");
        label.setAttribute("for", this.id)
        label.innerText = this.config.label || this.config.name
        return label
    }

    genFormEl() {
        const container = document.createElement('div');
        container.classList.add("mt-2")
        const container2 = document.createElement('div')
        container2.classList.add("flex", "rounded-md", "shadow-sm", "ring-1", "ring-inset", "ring-gray-300")
        container.appendChild(container2)
        const el = document.createElement('select');
        el.classList.add("block", "flex-1", "border-0", "bg-transparent", "py-1.5", "pl-1", "text-gray-900", "placeholder:text-gray-400", "sm:text-sm", "sm:leading-6",  "focus:border-black", "focus:bg-white");
        if (this.config.selectionOptions && this.config.selectionOptions.length) {
            this.config.selectionOptions.forEach(value => {
                const o = document.createElement('option');
                o.label = value.label
                o.value = value.value
                el.appendChild(o)
            })
        }
        el.value = this.config.defaultValue as string
        container2.appendChild(el)
        return container;
    }

}
